<template>
	<view class="container">

		<!-- 修改头像区域 -->
		<view class="avatar-container">
			<view class="avatar-preview">
				<image :src="list.profilePrcture" class="avatar-image" @click="handleAvatarClick" />
			</view>
		</view>
		<!-- 个人信息表单 -->
		<view class="item">
			<view class="title">姓名</view>
			<input v-model="list.username" class="input" type="text" placeholder="请输入姓名" pattern="[^\s@<>/]+"
				minlength="2" maxlength="24" required />

		</view>

		<view class="item">
			<view class="title">性别</view>
			<select v-model="list.sex" class="input">
				<option value="男">男</option>
				<option value="女">女</option>
			</select>
		</view>

		<view class="item">
			<view class="title">年龄</view>
			<select v-model="list.age" class="input">
				<option v-for="a in ages" :value="a">{{ a }} 岁</option>
			</select>
		</view>


		<view class="item">
			<view class="title">邮箱</view>
			<input v-model="list.email" @blur="checkEmail" class="input" type="text" placeholder="请输入邮箱号" />
			<text v-if="!emailValid" class="error">请输入正确的邮箱格式</text>
		</view>
		<view class="item">
			<view class="title">手机号码</view>
			<input v-model="list.phoneNumber" class="input" type="tel" placeholder="请输入手机号码" />
		</view>

		<view class="item">
			<view class="title">地区</view>
			<input v-model="list.address" class="input" type="text" placeholder="请输入住址" />
		</view>
		<view class="item">
			<view class="title">个人简介</view>
			<textarea v-model="list.bio" class="textarea" placeholder="请输入个人简介" maxlength="100"></textarea>
		</view>

		<!-- 提交按钮 -->
		<button @click="handleSubmit" class="submit-button">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gender: -1,
				ages: Array.from({
					length: 201
				}, (_, i) => i), // 0 到 200 岁的数组
				emailValid: true, // 标记邮箱是否有效，默认为true
				userId: uni.getStorageSync('id'),
				list: [],
				avatarPreview: '../../static/Myimg/xt.jpg' // 初始的默认头像路径
			};
		},
		methods: {
			onLoad() {
				// this.userId=uni.getStorageSync('id');

				// this.userId = getStorageSync("7"),
				this.request("/selectuserall/selectall", "get", {
					userId: this.userId
				}).then(
					(res) => {
						console.log(res);
						this.list = res.data.result.result;
						if (this.list.sex === 0) {
							this.list.sex = '女'
						} else {
							this.list.sex = '男'
						}
					}).catch((err) => {
					s
					console.log(this.userId);
					console.log(err);
				});

			},
			handleAvatarClick() {
				// 点击头像的逻辑，例如弹出修改头像的选择框或其他操作
				let imgurl = this.list.profilePrcture
				uni.navigateTo({
					url: "/pages/My/setImg/setImg?imgurl" + imgurl
				})

				// 在这里执行上传头像的逻辑或者跳转到修改头像的页面
				// 示例中暂未实现具体逻辑
			},
			handleSubmit() {
				// 创建一个新的对象，用于保存修改后的用户信息
				const updatedUserData = {
					userId: this.list.userId,
					username: this.list.username,
					sex: this.list.sex === '女' ? 0 : 1, // 根据字符串 '女' 或 '男' 转换为数字 0 或 1
					age: this.list.age,
					email: this.list.email,
					phoneNumber: this.list.phoneNumber,
					address: this.list.address,
					bio: this.list.bio
				};
				// 向后端发送请求保存用户信息
				// 用于post请求前端的请求参数需要拼接到url路径后面  `接口名?字段名=${传递的值}&字段名=${传递的值}`
				this.request( `/userProfileEditor/upUserProfileEditor?userId=${this.list.userId}&username=${
					 this.list.username}&age=${this.list.age}` , "post", updatedUserData)
					.then((res) => {
						console.log('用户信息更新成功');
						//修改成功后，显示提示框 
						uni.showToast({
							title: '修改成功',
							icon: 'success',
							duration: 2000, // 提示框显示时间，单位为毫秒 
						});
						// 处理成功的逻辑，例如跳转页面或提示用户
					}).catch((err) => {
						console.error('用户信息更新失败', err);
						// 处理失败的逻辑，例如显示错误信息给用户
					});
			}




		},
		checkEmail() {
			const emailRegex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

			// 检查邮箱格式是否符合正则表达式
			if (emailRegex.test(this.email)) {
				this.emailValid = true; // 符合格式，标记为有效
			} else {
				this.emailValid = false; // 不符合格式，标记为无效
				this.showEmailFormatError(); // 显示邮箱格式错误的提示框
			}
		},
		showEmailFormatError() {
			MessageBox.alert('邮箱格式错误，请输入有效的邮箱地址', '提示', {
				confirmButtonText: '确定',
				type: 'error',
			});
		},

	}
</script>

<style>
	.container {
		padding: 40rpx;
	}

	.item {
		margin-bottom: 40rpx;
	}

	.title {
		font-size: 36rpx;
		color: #333;
		margin-bottom: 20rpx;
		font-weight: 600;
	}

	.input,
	.textarea,
	select {
		width: 95%;
		padding: 22rpx;
		border: 2rpx solid #ccc;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.textarea {
		height: 160rpx;
		/* 控制多行文本框的高度 */
	}

	/* 修改头像区域样式 */
	.avatar-container {
		text-align: center;
		margin-bottom: 40rpx;
	}

	.avatar-preview {
		width: 240rpx;
		height: 240rpx;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto;
	}

	.avatar-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		cursor: pointer;
	}

	.submit-button {
		width: 100%;
		padding: 20rpx;
		background-color: #ff524c;
		color: white;
		border: none;
		border-radius: 8rpx;
		font-size: 32rpx;
		cursor: pointer;
	}
</style>